<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>爱租官网_租房网站,房屋出租信息_单身公寓,酒店式公寓</title>
	<link rel="icon" href="_img_/logo.ico"> 
	{css href="_css_/service_clean.css"}
	{css href="_js_/layui/css/layui.css"}
	{js href="_js_/jquery2.1.4.min.js"}
	{js href="_js_/layer/layer.js"}
	{js href="_js_/layui/layui.js"}
	{js href="_js_/jquery.validate.min.js"}
	{js href="_js_/additional-methods.js"}
	{js href="_js_/jquery.form.js"}
</head>
<body>
	<div class="layui-tab layui-tab-brief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">服务介绍</li>
	    <li>您得知道</li>
	    {eq name="data_cl.sid" value="1"}

			{else}
	    <li>服务评价</li>
	    {/eq}
	    <li>申请服务</li>
	  </ul>
	  <div class="layui-tab-content">
	  	<!-- 服务介绍 -->
	    <div class="layui-tab-item layui-show">
	    	<img style="height:200px;" src="/static/upload/system/s{$data_cl.sid+1}.jpg">
	    	{volist name="cls" id="vo"}
	    	<div class="d">
	    		<span class="dl">{$vo[0]}</span>
	    		<span class="dr">{$vo[1]}</span>
	    	</div>
	    	{/volist}
	    </div>
	    <!-- 您得知道 -->
	    <div class="layui-tab-item">
	    	<img style="height:200px;" src="/static/upload/system/s{$data_cl.sid+1}.jpg">
				<div class="d">
	    		<span class="dl">特别注意1：</span>
	    		<span class="dr">{$data_cl.at1}</span>
	    	</div>
	    	{present name="data_cl.at2"}
	    	<div class="d">
	    		<span class="dl">特别注意2：</span>
	    		<span class="dr">{$data_cl.at2}</span>
	    	</div>
	    	{/present}
	    	{present name="data_cl.at3"}
	    	<div class="d">
	    		<span class="dl">特别注意3：</span>
	    		<span class="dr">{$data_cl.at3}</span>
	    	</div>
	    	{/present}
	    	{present name="data_cl.at4"}
	    	<div class="d">
	    		<span class="dl">特别注意4：</span>
	    		<span class="dr">{$data_cl.at4}</span>
	    	</div>
	    	{/present}
	    </div>
	    <!-- 服务评价 -->
	    {eq name="data_cl.sid" value="1"}

			{else}
	    <div class="layui-tab-item">
	    	{volist name="comms" id="co"}
	    	{if condition="$co.type==0"}
	    	{if condition="$co.sid==$data_cl.sid"}
	    	<div class="d">
	    		<div class="left" style="float:left;">
	    			<img style="width:50px;height:50px;" src="_img_/{$co.avatar}"><br>
	    		<span class="dl">
	    			{$co.vname}
	    		</span>
	    		</div>
	    		<div class="right" style="width:150px;float:right;margin-right:150px;margin-top:20px;">
	    			<div>{$co.comment}</div>
	    			<span class="dr">{$co.comtime}</span>
	    		</div>
	    		{if condition="$co.reply!=''"}
	    		<div style="clear:both;margin-left:200px;color:#555555;font-size:12px;">爱租回评：{$co.reply}</div>
	    		{/if}
	    	</div>
	    	<hr>
	    	{/if}
	    	{/if}
	    	{/volist}
	    </div>
	    {/eq}
	    <!-- 申请保洁 -->
	    <div class="layui-tab-item step4">
	    <form method="post" action="javascript:;">
	    	<!-- 服务编号 -->
	    	<input type="hidden" value="{$data_cl.sid}" name="sid">
	    	<input type="hidden" value="" name="vid">
	    	<div>
			    <span>租房：</span>
			    <select name="rid">
			    	<option value="">请选择租房</option>
			    	{present name="info"}
			    	{volist name="info" id="vo"}
						<option value="{$vo.rid}">{$vo.addr}</option>
						{/volist}
						{else}
						<option value="">您还未租房</option>
						{/present}
			    </select>
			  </div>
			  {eq name="data_cl.sid" value="1"}
				<div>
	    		<span>据交租金还剩：【 <span style="color:green;" class="paytime">???</span> 】天</span>
	    	</div>
	    	<div>
	    		<span>月租：【 <span style="color:green;" class="price">???</span> 】元</span>
	    	</div>
	    	<div class="layui-form-item">
			  	<label class="layui-form-label"></label>
			  	<button type="submit" class="layui-btn">缴纳租金</button>
			  </div>
			  {else}
	    	<div>
	    		<span>提示：</span>
	    		<span>您当前还有【 <span style="color:green;" class="free">???</span> 】次免费上门保洁</span>
	    		<input type="hidden" name="free" value="0">
	    	</div>
	    	<div style="height:40px;">
			    <span>日期：</span>
			    <input type="text" name="starttime" id="date" placeholder="请选择日期" required>
			  </div>
				<div>
					<span>备注：</span>
					<input type="text" name="bz" placeholder="特殊需求可填写备注">
				</div>
				<div class="layui-form-item">
			  	<label class="layui-form-label"></label>
			  	<button type="submit" class="layui-btn">提交申请</button>
			  </div>
				{/eq}
			</form>
	    </div>
	  </div>  
	</div>
</body>

<script type="text/javascript">
$().ready(function(){
	$('form').validate({
		rules:{

		},
		messages:{
			starttime:{
				required:'请选择服务日期'
			}
		},
		submitHandler:function(form){
			$(form).ajaxSubmit({
				type:'post',
				url:'{:url('index/service/do_pay')}',
				datatype:'text',
				success:function(res){
					console.log(res.msg);
					// console.log(res.msg.free);
					if(res.msg == '请选择租房'){
						layer.msg(res.msg,{icon:2,time:1000});
					}else{
						if(res.msg.sid==1){
							var price=$('.price').text();
							layer.confirm('支付租金'+price+'元？',{icon:3},function(){
								var data = res.msg;
								$.post('{:url('index/service/sure_pay')}'+'?pay='+price,data,function(re){
									console.log(re);
									if(re.msg == '成功'){
										layer.msg('支付成功，可以在个人中心查看服务状态',{icon:1,time:3000});
									}
								})
							});
						}else{
							if(res.msg.free==0 && res.msg.sid==2){
								layer.confirm('免费次数用完了,确认支付50元保洁费？',{icon:3},function(){
									var data = res.msg;
									$.post('{:url('index/service/sure_pay')}'+'?pay=50',data,function(re){
										console.log(re);
										if(re.msg == '成功'){
											layer.msg('支付成功，可以在个人中心查看服务状态',{icon:1,time:3000});
										}
									})
								});
							}else{
								var data = res.msg;
								$.post('{:url('index/service/sure_pay')}'+'?pay=0',data,function(re){
									console.log(re);
									if(re.msg == '成功'){
										layer.msg('申请成功，可以在个人中心查看服务状态',{icon:1,time:3000});
									}
								})
							}
						}
						
					}
					
				}
			})
		}
	})
})


	//下拉框改变事件
	$('select').change(function(){
		var rid = $(this).val();
		var data = 'rid='+rid;
		$.post('{:url('index/service/do_clean')}',data,function(res){
			// console.log(res);
			$('.paytime').text(res.msg[0]);
			$('.price').text(res.msg[3]);
			$('input[name=vid]').val(res.msg[2]);
			if(res.msg[1]>0){
				$('.free').text(res.msg[1]);
				$('input[name=free]').val(res.msg[1]);
			}else{
				$('.free').text(0);
				$('input[name=free]').val(0);
			}
			
		})
	});

	layui.use('element', function(){
	  var element = layui.element;
	});

	if($('input[name=sid]').val() == 2){
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  laydate.render({
		    elem: '#date',
		    min:2,
		    max:30,
		    type:'datetime',
		  });

		});
	}
	if($('input[name=sid]').val() == 3){
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  laydate.render({
		    elem: '#date',
		    min:0,
		    max:30,
		    type:'datetime',
		    done:function(value,date,endate){
		    	// console.log(value);
		    	// console.log(date);
		    }
		  });

		});
	}
	

</script>

</html>